<template>
  <div>
    <el-upload class="upload-demo" drag action="" multiple :http-request="handHttpRequest">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
import { ChunkUploadFileApi } from '@/api/upload'
export default {
  name: 'uploadPage',
  data() {
    return {
      uploadId: '',
      ETag1: '',
      ETag2: '',
    }
  },
  methods: {
    handtap() {},
    async handHttpRequest(params) {
      var chunkSize = 5 * 1024 * 1024 // 1MB一片
      const name = params.file.name
      let UploadId = ''
      const uploadNextChunk = async (i) => {
        const file = this.getChunkInfo(params.file, i, chunkSize)
        console.log(file)
        const partSize = file.chunk.size
        const ChunkCount = i+1
        const res = await ChunkUploadFileApi(file.chunk, '123123123123123sa', name, partSize, ChunkCount, 123154545, UploadId)
        console.log(res)
        UploadId = res.uploadId

        if (i < 1) {
          // 仅上传两片，根据需求修改
          await uploadNextChunk(i + 1)
        }
      }
      const uploadNextChunkzzz = async (i) => {
        const file = this.getChunkInfo(params.file, i, chunkSize)
        console.log(file)
        const partSize = file.chunk.size
        const ChunkCount = i+1
        const res = await ChunkUploadFileApi(file.chunk, '123123123123123sa', name, partSize, ChunkCount, 123154545, UploadId)
        console.log(res)
        UploadId = res.uploadId
      }
      await uploadNextChunkzzz(1)
        await uploadNextChunk(0)
        await uploadNextChunk(0)
    },
    getChunkInfo(file, currentChunk, chunkSize) {
      var start = currentChunk * chunkSize
      var end = Math.min(file.size, start + chunkSize)
      var chunk = file.slice(start, end)
      return {
        start,
        end,
        chunk,
      }
    },
  },
}
</script>

<style></style>
